<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>shape mirror</title>
</head>

<body>
  <svg class="icon-play" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink"
    fill="steelblue" width="40" height="40" viewBox="0 0 36 36"
    data-play="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z"
    data-pause="M 12,26 16.33,26 16.33,10 12,10 z M 20.66,26 25,26 25,10 20.66,10 z">
    <path d="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z">
      <!-- <animate id="toPause" attributename="d" dur="1200ms" fill="freeze" to="M 12,26 16.33,26 16.33,10 12,10 z M 20.66,26 25,26 25,10 20.66,10 z" />
      <animate id="toplay" attributename="d" dur="1200ms" fill="freeze" to="M 12,26 18.5,22 18.5,14 12,10 z M 18.5,22 25,18 25,18 18.5,14 z" /> -->
    </path>
  </svg>
  <!-- 初始图形：一个五角星 -->
  <!-- 小提示：两个图形的point个数应该是一样的，否则会有问题！切记！ -->
  <!-- 这里添加颜色变形效果：方法类似上面 -->
  <!-- 添加动画效果 -->
  <!-- 有一个问题：动画最后图形没有保持住，自动复原到了五角星 -->
  <!-- 多边形定义：这里是一个五角星的图形 -->
  <!-- <svg vIEwBox="0 0 200 200">
    <polygon fill="#dd4814"
      points="97.3,0 127.4,60.9 194.6,70.7 145.9,118.1 157.4,185.1 97.3,153.5 37.2,185.1 48.6,118.1 0,70.7 67.2,60.9">
      <animate attributename="points" dur="1200ms" fill="freeze"
        to="110,58.2 147.3,0 192.1,29 141.7,105.1 118.7,139.8 88.8,185.1 46.1,156.5 0,125 23.5,86.6 71.1,116.7" />
      <animate attributename="fill" dur="1200ms" fill="freeze" to="#53B848" />
    </polygon>
  </svg> -->
  <script>
    let svg = document.querySelector('.icon-play');
    let svgPath = svg.querySelector('path');
    let play = svg.getAttribute('data-play')
    let pause = svg.getAttribute('data-pause')
    let toPause=document.querySelector('#toPause')
    let toPlay=document.querySelector('#toPlay')

    svg.addEventListener('click', function () {
      if (svg.classList.contains('play')) {
        svg.classList.remove('play');
        svgPath.setAttribute("d", play)
        // toPlay.beginElement()
      } else {
        svg.classList.add('play');
        svgPath.setAttribute("d", pause)
        // toPause.beginElement()
      }
    })
  </script>
  <div id="app"></div>
</body>

</html>